<template>
  <el-row class="seal-manage-module">
    <el-col class="title">印章管理</el-col>
    <el-col class="main-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="设计作品版权出售合同章" name="1">
          <el-row type="flex" :gutter="24">
            <el-col :span="6">
              <el-card :body-style="{ padding: '0px' }">
                <el-row class="seal">
                  <el-col class="card-title">印章名称</el-col>
                  <el-col class="card-content">设计作品版权出售合同</el-col>
                  <el-col>
                    <img
                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                      class="image"
                    />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="18">
              <div class="clearfix">
                <div class="fr">
                  <el-button type="primary" @click="addDialog(1)">新增持有人</el-button>
                  <el-button type="primary" @click="authDialog(1)">授权历史</el-button>
                </div>
              </div>
              <el-table :data="contractData" class="table">
                <el-table-column
                  v-for="item in columns"
                  :prop="item.prop"
                  :label="item.label"
                  :key="item.prop"
                ></el-table-column>
                <el-table-column label="操作">
                  <template v-slot="{row}">
                    <el-button type="text" class="delete-btn" @click="del(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination layout="prev, pager, next" v-if="total" :total="total"></el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="商品打样合同章" name="2">
          <el-row type="flex" :gutter="24">
            <el-col :span="6">
              <el-card :body-style="{ padding: '0px' }">
                <el-row class="seal">
                  <el-col class="card-title">印章名称</el-col>
                  <el-col class="card-content">设计作品版权出售合同</el-col>
                  <el-col>
                    <img
                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                      class="image"
                    />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="18">
              <div class="clearfix">
                <div class="fr">
                  <el-button type="primary" @click="addDialog(1)">新增持有人</el-button>
                  <el-button type="primary" @click="authDialog(1)">授权历史</el-button>
                </div>
              </div>
              <el-table :data="contractData" class="table">
                <el-table-column
                  v-for="item in columns"
                  :prop="item.prop"
                  :label="item.label"
                  :key="item.prop"
                ></el-table-column>
                <el-table-column label="操作">
                  <template v-slot="{row}">
                    <el-button type="text" class="delete-btn" @click="del(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination layout="prev, pager, next" v-if="total" :total="total"></el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="代加工合同章" name="3">
          <el-row type="flex" :gutter="24">
            <el-col :span="6">
              <el-card :body-style="{ padding: '0px' }">
                <el-row class="seal">
                  <el-col class="card-title">印章名称</el-col>
                  <el-col class="card-content">设计作品版权出售合同</el-col>
                  <el-col>
                    <img
                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                      class="image"
                    />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="18">
              <div class="clearfix">
                <div class="fr">
                  <el-button type="primary" @click="addDialog(1)">新增持有人</el-button>
                  <el-button type="primary" @click="authDialog(1)">授权历史</el-button>
                </div>
              </div>
              <el-table :data="contractData" class="table">
                <el-table-column
                  v-for="item in columns"
                  :prop="item.prop"
                  :label="item.label"
                  :key="item.prop"
                ></el-table-column>
                <el-table-column label="操作">
                  <template v-slot="{row}">
                    <el-button type="text" class="delete-btn" @click="del(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination layout="prev, pager, next" v-if="total" :total="total"></el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <el-dialog :visible.sync="authDialogShow" :title="dialogTitle" center>
      <el-table :data="contractData" class="table">
        <el-table-column type="checkbox" title=" "></el-table-column>
        <el-table-column
          v-for="item in authColumns"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="authDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="authDialogShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="userDialogShow" :title="dialogTitle" center>
      <el-table :data="contractData" class="table">
        <el-table-column type="checkbox" title=" "></el-table-column>
        <el-table-column
          v-for="item in columns"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
        ></el-table-column>
        <el-table-column label="实名状态">
          <template v-slot="{row}">
            <div>
              <span>{{row.state === "1" ? "认证通过" : "未认证"}}</span>
              <span v-if="row.state === '2'" class>.</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUser">取 消</el-button>
        <el-button type="primary" @click="submitUser">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
import { getProductMaterial } from "@/api";
export default {
  name: "productManage",
  data() {
    return {
      activeName: "1",
      userDialogShow: false,
      authDialogShow: false,
      authColumns: [
        {
          prop: "stationNo",
          label: "姓名"
        },
        {
          prop: "contractType",
          label: "手机号"
        },
        {
          prop: "company",
          label: "操作日期"
        },
        {
          prop: "state",
          label: "授权状态"
        },
        {
          prop: "sign",
          label: "操作人"
        }
      ],
      planNo: "",
      columns: [
        {
          prop: "stationNo",
          label: "印章持有人"
        },
        {
          prop: "contractType",
          label: "工号"
        },
        {
          prop: "company",
          label: "手机号"
        },
        {
          prop: "state",
          label: "部门"
        },
        {
          prop: "sign",
          label: "职位"
        }
      ],
      contractData: [
        {
          contractType: " 001",
          company: "13984223950",
          state: " 总裁部",
          sign: " CEO",
          time: "2020-10-10 12:32:43"
        },
        {
          contractType: "002",
          company: "13984223950",
          state: "总裁部",
          sign: "---",
          time: "2020-10-10 12:32:43"
        }
      ],
      pageNum: 1,
      pageSize: 20,
      total: 0
    };
  },
  computed: {
    dialogTitle() {
      let title = "";
      if (this.activeName === "1") {
        title = "设计作品版权出售合同章";
      } else if (this.activeName === "2") {
        title = "商品打样合同章";
      } else if (this.activeName === "3") {
        title = "代加工合同章";
      }
      return title + "授权历史";
    }
  },
  methods: {
    del(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addDialog(type) {},
    authDialog(type) {},
    cancelUser() {},
    submitUser() {},
    selectCallback() {
      this.getTableList();
    },
    getTableList() {
      const params = {
        planNo: this.planNo,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      getProductMaterial(params).then(res => {
        if (res.data.code === "0") {
          this.contractData = res.data.data.rows;
          this.total = res.data.data.total;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.seal-manage-module {
  .title {
    margin-bottom: 20px;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    box-shadow: 0px 2px 4px 0px #d1d9e2;
  }
  .main-content {
    background-color: #fff;
    padding: 10px;

    .seal {
      text-align: center;
      font-size: 16px;
      .card-title {
        color: #4d4d4d;
        font-weight: 500;
        margin: 10px 0;
      }
      .card-content {
        color: #808080;
        font-weight: 400;
        margin-bottom: 20px;
      }
    }
    .table {
      margin: 10px 0;
      .delete-btn {
        color: red;
      }
    }
  }
}
</style>